<template>
  <PageWrapper>
    <BasicTable
      class="page-search-table"
      @register="registerTable"
    >
      <template #tableTitle>
        <a-button type="primary" @click="add">新增</a-button>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '编辑',
              onClick: handleClick.bind(null, record),
            },
            {
              label: '高级',
              onClick: openEditor.bind(null, record),
            },
            {
              label: '删除',
              color: 'error',
              popConfirm: {
                title: '是否删除',
                confirm: handleDelete.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <Dialog @register="registerModel" @success="submitSuccess" />
    <EditorDialog @register="registerEditorModel" />
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { PageWrapper } from '/@/components/Page';
  import { useModal } from '/@/components/Modal';
  import { tableConfig } from './tableData';
  import Dialog from './dialog.vue';
  import EditorDialog from './editorDialog.vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  export default defineComponent({
    components: { PageWrapper, BasicTable, Dialog, TableAction, EditorDialog },
    setup() {
      const { createMessage } = useMessage();
      const [registerModel, { openModal: openModal }] = useModal();
      const [registerEditorModel, { openModal: openEditorModal }] = useModal();
      const [registerTable, { getForm,reload}] = useTable(tableConfig);

      function add() {
        const formData = getForm().getFieldsValue();
        openModal(true, formData);
      }
     function handleClick(rowdata: Recordable) {
       openModal(true, {
         rowdata,
         isUpdate: true,
       });
     }
      
      function submitSuccess(e) {
        reload();
        createMessage.success(e.isUpdate ? '修改成功' : '添加成功');
      }
      
      // async function handleDelete(rowData: ServiceModel) {
      //   await deleteServiceApi(rowData);
      //   createMessage.success('success');
      //   reload();
      // }
      function openEditor(rowdata: Recordable) {
        openEditorModal(true, rowdata);
      }
      return {
        registerModel,
        openModal,
        registerEditorModel,
        openEditorModal,
        handleClick,
        openEditor,
        registerTable,
        add,
        submitSuccess
      };
    },
  });
</script>
